<template>
  <div class="list">
    <div
      class="list_item"
      :class="
        shopObj.remindMark === '1' || shopObj.remindMark === '3'
          ? 'twinkle'
          : ''
      "
    >
      <div class="list_item_head w100 flex-x flex-space">
        <div class="flex-x">
          <div class="list_item_head_title">{{ shopObj.deviceName }}</div>
          <img
            v-if="shopObj.remindMark === '1' || shopObj.remindMark === '3'"
            src="@/assets/images/shengyin_yes.png"
            style="width: 26px; height: 26px; margin-left: 6px"
            alt=""
            @click="changeHorn"
          />
          <img
            v-else
            src="@/assets/images/shengyin_no.png"
            style="width: 26px; height: 26px; margin-left: 6px"
            alt=""
          />
        </div>
        <span
          class="el-icon-s-tools item_color"
          style="font-size: 24px"
          @click="handleSet"
        />
      </div>
      <div class="list_item_content w100">
        <div class="w100">
          <div class="flex-x flex-center w100 flex-bottom">
            <div class="flex-y flex-center" style="padding: 20px">
              <div class="list_item_content_top flex-x">
                <span
                  style="margin-right: 4px"
                  class="el-icon-time item_color list_item_content_top_title"
                />
                <span
                  class="item_color list_item_content_top_title text_overflow"
                >
                  设备装炉时间
                </span>
              </div>
              <div class="list_item_content_top_title text_overflow">
                {{
                  $moment(shopObj.chargeInTime).format("YYYY-MM-DD HH:mm:ss")
                }}
              </div>
            </div>
            <!-- <div class="line_2" style="margin: 0 10px" />
            <div class="flex-y flex-center" style="padding: 20px">
              <div class="list_item_content_top flex-x">
                <span
                  style="margin-right: 4px"
                  class="el-icon-time item_color list_item_content_top_title"
                />
                <span
                  class="item_color list_item_content_top_title text_overflow"
                >
                  预计出炉时间
                </span>
              </div>
              <div class="list_item_content_top_title text_overflow">
                {{ $moment(shopObj.outWarnTime).format("YYYY-MM-DD HH:mm:ss") }}
              </div>
            </div> -->
          </div>
        </div>
        <div class="line_1" />
        <div class="w100">
          <div class="flex-x flex-space w100 flex-top">
            <div class="flex-y flex-center" style="padding: 20px 10px">
              <div class="list_item_content_top flex-x">
                <span
                  style="margin-right: 4px"
                  class="el-icon-time item_color list_item_content_top_title"
                />
                <div
                  class="item_color list_item_content_top_title text_overflow"
                >
                  阶段运行时间
                </div>
              </div>
              <div class="list_item_content_top_title">{{ getTime() }}</div>
            </div>
            <div class="line_3" />
            <div class="flex-y flex-center" style="padding: 20px 10px">
              <div class="list_item_content_top flex-x">
                <span
                  style="margin-right: 4px"
                  class="el-icon-time item_color list_item_content_top_title"
                />
                <span
                  class="item_color list_item_content_top_title text_overflow"
                >
                  阶段设定时间
                </span>
              </div>
              <div class="list_item_content_top_title">
                {{ toHoursAndMinutes(shopObj.programSetTime) || "-- " }}
              </div>
            </div>
            <div class="line_3" />
            <div class="flex-y flex-center" style="padding: 20px 10px">
              <div class="list_item_content_top flex-x">
                <span
                  style="margin-right: 4px"
                  class="el-icon-time item_color list_item_content_top_title"
                />
                <span
                  class="item_color list_item_content_top_title text_overflow"
                >
                  阶段剩余时间
                </span>
              </div>
              <div class="list_item_content_top_title">
                {{ toHoursAndMinutes(shopObj.programRemainTime) || "-- " }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="shopObj.percentage < 5" class="flex-x">
        <div :style="'width:' + shopObj.percentage + '%'" />
        <div class="progressTopLit">{{ shopObj.percentage }}%</div>
      </div>

      <div
        v-else-if="shopObj.percentage >= 5 && shopObj.percentage < 99"
        class="flex-x"
      >
        <div
          class="progressTop"
          :style="'margin-left:' + shopObj.percentage + '%'"
        >
          {{ shopObj.percentage }}%
        </div>
      </div>
      <div v-else class="flex-x flex-right">
        <div class="progressTopHigh">{{ shopObj.percentage }}%</div>
      </div>
      <el-progress
        :text-inside="true"
        :stroke-width="4"
        :percentage="Number(shopObj.percentage)"
      />
    </div>
  </div>
</template>

<script>
import { shopsUpdate } from "@/api/centralized";
export default {
  props: {
    shopObj: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      percentage: 100
    };
  },
  computed: {},
  methods: {
    getPercent(minutes) {
      let percent = 0;
      if (!this.shopObj.programSetTime || this.shopObj.programSetTime === "0") {
        percent = minutes;
      } else {
        percent = (minutes / this.shopObj.programSetTime).toFixed(0);
      }
      if (percent) {
        if (percent > 100) {
          this.shopObj.percentage = "100";
        } else if (percent < 0) {
          this.shopObj.percentage = "0";
        } else {
          this.shopObj.percentage = percent;
        }
      } else {
        this.shopObj.percentage = "0";
      }
    },
    getTime() {
      if (
        this.shopObj.chargeInTime &&
        this.shopObj.programRunTime &&
        this.shopObj.programRunTime !== "0"
      ) {
        let startDate = new Date(this.shopObj.chargeInTime);
        let endDate = new Date(this.shopObj.programRunTime);
        // 计算两个日期相差的毫秒数
        let msecNum = endDate.getTime() - startDate.getTime();
        // 计算两个日期相差的分钟数
        let minutes = (msecNum / (1000 * 60)).toFixed(0);

        this.getPercent(minutes);
        // 3)计算两个日期相差的天数
        return this.toHoursAndMinutes(minutes);
      } else {
        return "0h 0min";
      }
    },
    toHoursAndMinutes(totalMinutes) {
      const hours = Math.floor(totalMinutes / 60);
      const minutes = totalMinutes % 60;
      return hours + "h " + minutes + "min";
    },
    handleSet() {
      this.$emit("handleSet", this.shopObj);
    },
    changeHorn() {
      const message =
        this.shopObj.remindMark === "1"
          ? "是否关闭出炉提醒？"
          : "是否关闭到温提醒？";
      this.$confirm(message, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          const changeObj = { ...this.shopObj };
          if (this.shopObj.remindMark === "1") {
            changeObj.remindMark = "0";
          } else if (this.shopObj.remindMark === "3") {
            changeObj.remindMark = "2";
          }
          shopsUpdate({ ...changeObj }, changeObj.token).then(res => {
            if (res.code === 1000) {
              this.$msg({
                type: "success",
                message: "提醒关闭成功"
              });
              this.$emit("regetData");
            }
          });
        })
        .catch(err => {});
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
.text_overflow {
  @include textoverflow(1);
}
.twinkle {
  background: #67c23a !important;
  animation: fade 600ms infinite;
  -webkit-animation: fade 600ms infinite;
}
@keyframes fade {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0.6;
  }

  to {
    opacity: 1;
  }
}

@-webkit-keyframes fade {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0.6;
  }

  to {
    opacity: 1;
  }
}
.list {
  // padding: 10px;
  /deep/ {
    .el-progress-bar {
      display: block;
    }
    .el-progress {
      height: 4px;
      min-height: 4px;
    }
    .el-progress-bar__outer {
      background-color: #050b2c;
      border-radius: 0;

      .el-progress-bar__inner {
        background-image: linear-gradient(to right, #0762e9, #57c9f0);
        border-radius: 0;
      }
    }
  }
  .item_color {
    color: #44c8e0;
  }

  &_item {
    overflow: hidden;
    // padding: 10px;
    background-color: #010848;
    border-radius: 6px;
    // box-shadow: 0 1px 4px rgba(103, 194, 58, 0.2);
    .line_3 {
      width: 2px;
      height: 105px;
      background: linear-gradient(
        to top,
        rgba(0, 202, 232, 0) 0%,
        rgba(0, 202, 232, 0.8) 100%
      );
    }
    .line_2 {
      width: 2px;
      height: 105px;
      background: linear-gradient(
        to top,
        rgba(0, 202, 232, 0.8) 0%,
        rgba(0, 202, 232, 0) 100%
      );
    }
    .line_1 {
      width: 100%;
      height: 2px;
      background: linear-gradient(
        to right,
        rgba(0, 202, 232, 0) 0%,
        rgba(0, 202, 232, 0.8) 50%,
        rgba(0, 202, 232, 0) 100%
      );
    }
    box-shadow: 0 0 4px #0b186c, 0 0 4px #0b186c inset;
    border: 1px solid #0c3784;
    &_content_msg {
      margin-bottom: 10px;
      white-space: nowrap;
      color: #fff;
      &_state {
        width: 60%;
        height: 20px;
        background-color: #67c23a;
        border-radius: 4px;
        margin: 0 6px;
      }
      &:last-child {
        margin-bottom: 0;
      }
    }
    &_content {
      padding: 0 8px;
      &_top {
        margin-bottom: 20px;
        &_title {
          font-weight: bold;
          font-size: 16px;
        }
      }
    }
    &_head {
      padding: 10px;
      &_title {
        color: #409eff;
        font-size: 19px;
        font-weight: bold;
      }
      &_btn {
        cursor: pointer;
      }
    }
  }
  /deep/ .el-progress-bar__innerText {
    display: none;
  }
  .progressTop {
    position: relative;
    width: 30px;
    top: -10px;
    right: 15px;
    background: rgb(97, 213, 234);
    font-size: 12px;
    color: #000;
    text-align: center;
    padding: 2px;
  }

  .progressTop:after {
    content: "";
    position: absolute;
    bottom: -5px;
    // left: 116px;
    right: 10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 5px 0;
    border-color: rgb(97, 213, 234) transparent transparent;
  }
  .progressTopHigh {
    position: relative;
    width: 35px;
    top: -10px;
    background: rgb(97, 213, 234);
    font-size: 12px;
    color: #000;
    text-align: center;
    padding: 2px;
  }

  .progressTopHigh:after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 25px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 5px 0;
    border-color: rgb(97, 213, 234) transparent transparent;
  }
  .progressTopLit {
    position: relative;
    width: 30px;
    top: -10px;
    background: rgb(97, 213, 234);
    font-size: 12px;
    color: #000;
    text-align: center;
    padding: 2px;
  }

  .progressTopLit:after {
    content: "";
    position: absolute;
    bottom: -5px;
    // left: 116px;
    right: 20px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 5px 0;
    border-color: rgb(97, 213, 234) transparent transparent;
  }
}
</style>
